<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>nav 导航</title>
 <style>
  .layui-breadcrumb {
   height: 30px;
  }
 </style>
</head>

<body>
 <div class="layui-container">
  <div class="layui-row layui-col-spacs15">
   <div class="layui-col-md12">
    <h3>水平导航</h3>
    <ul class="layui-nav" lay-filter="">
     <li class="layui-nav-item layui-this"><a href="">最新活动</a></li>
     <li class="layui-nav-item "><a href="">产品</a></li>
     <li class="layui-nav-item"><a href="">大数据</a></li>
     <li class="layui-nav-item">
      <a href="javascript:;">解决方案</a>
      <dl class="layui-nav-child">
       <!-- 二级菜单 -->
       <dd><a href="">移动模块</a></dd>
       <dd><a href="">后台模版</a></dd>
       <dd><a href="">电商平台</a></dd>
      </dl>
     </li>
     <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    <br>
    <h4>导航中的其它元素 除了一般的文字导航，我们还内置了图片和徽章</h4>
    <ul class="layui-nav layui-bg-green">
     <li class="layui-nav-item">
      <a href="">控制台<span class="layui-badge">9</span></a>
     </li>
     <li class="layui-nav-item">
      <a href="">个人中心<span class="layui-badge-dot"></span></a>
     </li>
     <li class="layui-nav-item">
      <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
      <dl class="layui-nav-child">
       <dd><a href="javascript:;">修改信息</a></dd>
       <dd><a href="javascript:;">安全管理</a></dd>
       <dd><a href="javascript:;">退了</a></dd>
      </dl>
     </li>
    </ul>
    <p>水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）</p>
    <p>垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）</p>
   </div>
  </div>
  <div class="layui-row layui-col-spacs15">
   <div class="layui-col-md12">
    <h3>垂直/侧边导航</h3>
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
     <!-- <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
     <li class="layui-nav-item layui-nav-itemed">
      <a href="javascript:;">默认展开</a>
      <dl class="layui-nav-child">
       <dd><a href="javascript:;">选项1</a></dd>
       <dd><a href="javascript:;">选项2</a></dd>
       <dd><a href="">跳转</a></dd>
      </dl>
     </li>
     <li class="layui-nav-item">
      <a href="javascript:;">解决方案</a>
      <dl class="layui-nav-child">
       <dd><a href="">移动模块</a></dd>
       <dd><a href="">后台模版</a></dd>
       <dd><a href="">电商平台</a></dd>
      </dl>
     </li>
     <li class="layui-nav-item"><a href="">产品</a></li>
     <li class="layui-nav-item"><a href="">大数据</a></li>
    </ul>
   </div>
  </div>
  <div class="layui-row layui-col-spacs15">
   <p>水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：</p>
   <p>垂直导航需要追加class：layui-nav-tree</p>
   <p>侧边导航需要追加class：layui-nav-tree layui-nav-side</p>
   <h3>导航可选属性</h3>
   <img src="../../img/26.png" alt="">
  </div>
  <div class="layui-row layui-col-spacs15">
   <h3>面包屑</h3>
   <span class="layui-breadcrumb" lay-filter="breadcrumb">
    <a href="javascript:;">首页</a>
    <a href="javascript:;">演示</a>
    <a><cite>导航元素</cite></a>
   </span>
   <p>你还可以通过设置属性 lay-separator="-" 来自定义分隔符。如： 首页- 国际新闻- 亚太地区- 正文</p>
   <span class="layui-breadcrumb" lay-separator="|">
    <a href="">娱乐</a>
    <a href="">八卦</a>
    <a href="">体育</a>
    <a href="">搞笑</a>
    <a href="">视频</a>
    <a href="">游戏</a>
    <a href="">综艺</a>
   </span>
  </div>

 </div>
 <script>
  layui.use(['form', 'layer', 'element'], function () {
   var foprm = layui.form,
    element = layui.element;
   element.render('nav', 'component-nav');
  });
 </script>
</body>

</html>